<style scoped>
  .sellform >>> .weui-form-preview__hd .weui-form-preview__value {
    font-size: 1.2em;
  }
  .sellform {
    background: #e3e3e3;
  }
  .page-infinite-wrapper {
    background: #e3e3e3;
  }
  .sellform >>> .weui-cells {
    margin-top: 0;
    background: #e3e3e3;
  }
  .sellform >>> .weui-loadmore__tips {
    background: #e3e3e3;;
  }
  .sellform >>> .weui-loadmore {
    margin-bottom: 0;
  }
  .weui-form-preview {
    margin: 5px;
    border-radius: 5px;
  }

  .rj-cell-child {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
    text-align: left;
  }
  .rj-cell-child.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell-child.minpad{
    padding-right: 10px !important;
  }
  .rj-cell-child label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell-child span {
    padding-left: 20px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell-child .tip {
    font-size: 16px;
    color: #333;
  }
  .rj-cell-child i {
    font-size: 18px;
    font-style: normal;
    color: #333;
  }
  .rj-cell-child-tit {
    background: #eee;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #ddd;
  }
  .weui-form-preview__ft .weui-form-preview {
    background: #f5f5ef;
  }
  .weui-form-preview__ft {
    line-height: normal;
  }



  .weui_tab_bd {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd {
    padding: 10px 0;
    height: 2.5em;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  em.weui-form-preview__value {
    width: 32%;
    display: inline-block;
    text-align: center;
  }
  .hoverbar {
    background: #cfd4d6;
    position: relative;
    top:5px;
    left:90%;
    bottom: 100px;
    right: 20px;
    height: 20px;

    width: 20px;
    z-index: 100;
    font-size: 15px;
    border-radius: 50%;
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.5);
    color: #fff;
    text-align:center;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
    background: #eee;
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 20px;
  }
  /*.weui-panel.weui-panel_access {*/
  /*  padding-bottom: 10px;*/
  /*}*/
  /*.weui-panel__bd:not(.base) {*/
  /*  width: 98%;*/
  /*  padding: 0 1% 2px 1%;*/
  /*}*/
  .mark span {
    padding-right: 5px;
  }
  .switchbtn img {
    width: 15px;
  }
  .weui-grids {
    background: #fff;
  }
  .weui-grids.sec {
    margin-top: 3px;
  }
  .weui-grid {
    width: 15%;
    padding: 10px 5px;
  }
  .weui-grids.sec .weui-grid {
    width: 20%;
    padding: 10px 5px;
  }
  .weui-grid.tit {
    width: 40%;
  }
  .weui-grids.sec .weui-grid.tit {
    width: 30%;
  }
  .weui-grid__label {
    overflow: auto;
    text-overflow: initial;
  }
  input.time {
    border: none;
    font-size: 16px;
    width: 26%;
    padding: 0 3%;
    text-align: center;
  }
  .weui-cell {
    padding: 5px 15px;
    margin-bottom: 5px;
    background: #fff;
  }
  .weui-cell:before {
    border-top: none;
  }
  .weui-select {
    width: 28%;
    height: auto;
    line-height: normal;
  }
  .fixbar {
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 5px 10px;
    text-align: center;
    color: red;
    font-size: 20px;
    z-index: 10000;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
  }
  .total {
    color: red;
    font-size: 16px;
  }
</style>
<template>
  <div>
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      生产日报列表
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <select class="weui-select" name="strid" v-model="strid" id="room">
            <option value="" disabled>选择库房</option>
            <option  v-for="(item, index) in rooms" :key="item.guid" :value="item.guid" >{{item.name}}</option>
          </select>
          <select class="weui-select" name="partid" v-model="partid" id="depart">
            <option value="" disabled>选择班组</option>
            <option  v-for="(item, index) in departs" :key="item.guid" :value="item.guid" >{{item.name}}</option>
          </select>
          <input type="text" id='datetime-picker' class="time" name="plandate" placeholder="选择日期" />
        </div>
      </div>
      <div class="weui_tab_bd" style="background-color: #fff">
        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" >
          <mescroll-vue ref="mescroll" id="wrapper" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <div class="weui-form-preview" v-for="(item, index) in data" :key="item.guid" :ref="item.guid">
              <div class="weui-form-preview__hd" @click="viewItem(item.guid, item.srname, item.departname, item.dailydate)">
                <em class="weui-form-preview__value">{{item.srname}}</em>
                <em class="weui-form-preview__value">{{item.departname}}</em>
                <em class="weui-form-preview__value">{{item.dailydate}}</em>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">成本</label>
                  <span class="weui-form-preview__value">{{item.cost}} 元</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">收入</label>
                  <span class="weui-form-preview__value">{{item.income}} 元</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">利润</label>
                  <span class="weui-form-preview__value total">{{item.profit}} 元</span>
                </div>

              </div>
            </div>




          </mescroll-vue>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import MescrollVue from 'mescroll.js/mescroll.vue'
  export default {
    name: 'ProductionReport',
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        rooms: [],
        departs: [],
        strid: '',
        partid: '',
        postParams: {
        },
        mescroll: null, // mescroll实例对象
        mescrollDown: {},
        mescrollUp: { // 上拉加载的配置.
          callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
          page: {
            num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
            size: 20 //每页数据条数,默认10
          },
          htmlNodata: '<p class="upwarp-nodata">-- 我是有底线的 --</p>',
          noMoreSize: 1,
          empty: {
            warpId: "wrapper", //父布局的id (1.3.5版本支持传入dom元素)
            tip: "暂无相关数据~" //提示
          }
        },
        wrapperHeight: 600,
        data: [],
      }
    },
    components: { MescrollVue},
    created() {
    },
    mounted () {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - 40;

      let that = this;
      this.getDepartment();
      this.getStoreRoom();
      //this.getStoreRoom();
      //日历初始化
      $("#datetime-picker").calendar();
      //日历赋初值
      //$("#datetime-picker").val(this.getDate(-1));
      //that.postParams.plandate = $("#datetime-picker").val().replace(/\//g, '-');

      $('#datetime-picker').change(function () {
        that.postParams.plandate = $(this).val().replace(/\//g, '-');
        that.getPageData();
      })
    },
    watch: {
      'strid': function (val, oldval) {
        this.postParams.strid = val;
        this.getPageData();
      },
      'partid': function (val, oldval) {
        this.postParams.partid = val;
        if (oldval == '') return;
        this.getPageData();
      },
    },
    computed: {
    },
    methods: {
      upCallback (page, mescroll) {
        //alert(this.postParams.code)
        this.postParams.pageNo = page.num;
        this.postParams.pageSize = page.size;
        // 联网请求
        this.axios({
          method: 'get',
          url: '/produce/ProductionDaily!list.action',
          params: this.postParams
        }).then((response) => {
          if (response.data.status == 'true') {
            let res = response.data.result != undefined ? response.data.result : {list: {rows: []}};

            // 如果是第一页需手动置空列表
            if (page.num === 1 && this.data.length != 0) this.data = [];
            // 把请求到的数据添加到列表
            this.data = this.data.concat(res.list.rows);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(res.list.rows.length)
            })
            //将获取上一访问列表临时页码恢复正常
            if (this.mescrollUp.page.size > 20) {
              this.mescrollUp.page.num = this.$store.state.list.pageNo;
              this.mescrollUp.page.size = 20;
            }
          } else if (response.data.status == 'false') {
            this.toastText(response.data.result);
          } else {
            this.toastError("系统错误");
          }

        }).catch((e) => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr()
        })
      },
      mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
      },
      getPageData: function () {
        $('#wrapper').scrollTop(0);
        this.data = [];
        this.mescroll.resetUpScroll();
      },
      getStoreRoom: function () {
        this.axios({
          method: 'get',
          url: '/sales/Salespermission!getPermisForStore.action',
          params: {functionTypes: 8} //lrj-0221修改，原来不传functype值
        }).then(response => {
          if (response.data.msg == 'true') {
            this.rooms = response.data.storeroom;
          } else if (response.data.msg == 'loginout') {
            this.toastText('请重新登录');
          } else {
            this.toastText('获取库房数据失败');
          }
        });
      },
      getDepartment: function () {
        this.axios({
          method: 'get',
          url: '/sales/Salespermission!getPermisForDepart.action',
          params: {functionTypes: 8, departype: 2} //lrj-0221修改，原来不传functype值
        }).then(response => {
          if (response.data.msg == 'true') {
            this.departs = response.data.department;
          } else if (response.data.msg == 'loginout') {
            this.toastText('请重新登录');
          } else {
            this.toastText('获取部门数据失败');
          }
        });
      },
      viewItem: function(guid, room, depart, plandate) {
        this.$router.push({name: 'CountProfit', query: {id:guid, room: room, depart: depart, plandate: plandate}});
      },
      getDate: function (dayCount) {
        if(null == dayCount){
        }
        dayCount = 0;
        var dd = new Date();
        dd.setDate(dd.getDate()+dayCount);//设置日期
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;//获取当前月份的日期
        var d = dd.getDate();
        return y+"/"+m+"/"+d;
      }
    },
    activated () {
      //判断是否是返回上一页
      if (this.$store.state.list.reffer != this.$options.name) return;
      //获取上一次访问列表数据
      this.mescrollUp.page.num = 0;
      this.mescrollUp.page.size = this.$store.state.list.pageNo * this.mescrollUp.page.size;
      this.getPageData();
      //定位
      this.$nextTick(function(){
        let position = this.$store.state.list.postion //返回页面取出来
        $('#wrapper').scrollTop(position);
      })
    },
    beforeRouteLeave(to, from, next){
      let position = $('#wrapper').scrollTop();
      this.$store.commit('setPosition', position) //离开路由时把位置存起来
      this.$store.commit('setPageNo', this.mescrollUp.page.num);
      this.$store.commit('setReffer', this.$options.name);
      next()
    }
  }
</script>
